<template>
	<view class=" page">
		<!-- 顶部logo -->
		<view class="top">
			<view class="navbar" :style="[{ minHeight: navBarHeight + 'px' }]">
				<view class="inner" :class="{ 'scrolled': isScrolled }" :style="[
						{ minHeight: menuHeight + 'px' },
						{ lineHeight: menuHeight + 'px' },
						{ paddingRight: menuRight * 2 + 'px' },
						{ paddingTop: navBarHeight - menuHeight - menuTop+ 'px' },
						{ paddingBottom: '20rpx' },
					]">
					<view class="flex-row justify-between" :style="[
							{ marginRight: menuWidth + 'px' },
							{ paddingLeft: menuRight * 2 + 'px' },
						]">
						<view class="loaction-slot">
							<image src="../../static/test.png" mode="aspectFit" class="logo-image"></image>
							<view class="loaction-title">
								<text class="fs-24 ad-text">机型任选-省钱省心-平台入驻门店超300家</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="slot-height" :style="[{ height: statusBarHeight+menuTop+menuBotton+ 44+  'px' }]"></view>
		</view>


		<!-- 搜索栏 -->
		<view class="flex-row justify-between items-center section_5">
			<view class="flex-row">
				<image class="shrink-0 image_3" src="/static/imgs/search-normal.png" />
				<!-- <text class="font_2 text ml-7">iPhone 15特价</text> -->
				<input class="font_2 text ml-7" type="text" placeholder="搜索" placeholder-class="placeholder"
					v-model="searchText" @confirm="handleSearch" />
			</view>
			<view class="search-btn1">
				<button class="search-btn" @tap="searchInBaidu">
					<text class="btn-text">搜索</text>
				</button>
			</view>
		</view>

		<!-- 横向滚动列表 -->
		<view class="slot-img relative">
			<swiper class="scroll" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="500"
				:circular="true" @change="change">
				<swiper-item class="item" v-for="(item,index) in horizontalScrollNavList" :key="index">
					<image class="bg" mode="widthFix" lazy-load="true" :src="item.imageInput"></image>
				</swiper-item>
			</swiper>

			<!-- dots -->
			<view class="dtos">
				<view class="dto" :class="{'dto-active':index===currIndex}"
					v-for="(item,index) in horizontalScrollNavList" :key="index">
				</view>
			</view>
		</view>

		<!-- 金刚区1 -->
		<view class="grid">
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('apple')">
				<image class="image_4" src="/static/imgs/7.png" />
				<text class="font_4 text_3 mt-5">苹果手机</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('android')">
				<image class="image_4" src="/static/imgs/8.png" />
				<text class="font_4 text_3 mt-5">安卓手机</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('used')">
				<image class="image_4" src="/static/imgs/6.png" />
				<text class="font_4 text_3 mt-5">二手优品</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('tablet')">
				<image class="image_4" src="/static/imgs/5.png" />
				<text class="font_4 text_3 mt-5">平板电脑</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('game')">
				<image class="image_4" src="/static/imgs/3.png" />
				<text class="font_4 text_3 mt-5">游戏电玩</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('drone')">
				<image class="image_4" src="/static/imgs/4.png" />
				<text class="font_4 text_3 mt-5">航拍影音</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('home')">
				<image class="image_4" src="/static/imgs/2.png" />
				<text class="font_4 text_3 mt-5">家庭影音</text>
			</view>
			<view class="flex-col items-center grid-item" @tap="navigateToCategory('office')">
				<image class="image_4" src="/static/imgs/1.png" />
				<text class="font_4 text_3 mt-5">办公设备</text>
			</view>
		</view>

		<!-- 通告栏 -->
		<view class="notice-bar" v-if="showNotice">
			<view class="notice-content">
				<view class="notice-text">
					<text>关注公众号，订单动态实时提醒</text>
				</view>
				<button class="notice-btn" @click="handleNoticeFollow">关注</button>
				<!-- 可选：添加关闭按钮 -->
				<text class="close-btn" @click="closeNotice">×</text>
			</view>
		</view>


		<!-- 金刚区2 -->
		<view class="container">
			<!-- 左侧iPhone 15系列部分 -->
			<view class="left-section">
				<image class="left-image" src="/static/ww/16.png"></image>
			</view>

			<!-- 右侧推荐商品部分 -->
			<view class="right-section">
				<!-- 商品1 -->
				<view class="product" style="margin-bottom: 20rpx;">
					<image class="product-image" src="/static/imgs/g1.png"></image>
				</view>
				<!-- 商品2 -->
				<view class="product" style="margin-bottom: 20rpx;">
					<image class="product-image" src="/static/imgs/g2.png"></image>
				</view>
				<!-- 商品3 -->
				<view class="product">
					<image class="product-image" src="/static/imgs/g3.png"></image>
				</view>
			</view>
		</view>

		<!-- 店铺栏 -->
		<view class="store-card">
			<!-- 左侧店铺图片 -->
			<image class="store-image" src="/static/imgs/dp.png"></image>

			<!-- 右侧信息部分，带有背景图片 -->
			<view class="store-info">
				<view class="store-title">厦门新生活店</view>
				<view class="store-location">
					<text class="location-text">思明区</text>
					<text class="distance-text"> | 距你15.5km</text>
				</view>
				<view class="" style="width: 100%;display: flex;justify-content: flex-end;">
					<view class="store-button" @tap="navigateToGaodeMap">
						<text class="button-text">高德地图</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 分类栏 -->
		<view class="slot">
			<view class="mt-10 ml-10 content-show relative">
				<view class="">

				</view>
				<text class="text_1">智能手机</text>
				<view class="text_2">
					<text class="">5G新手机快速体验</text>
					<view class="gengduo" @tap="gengduo">
						<text class="">更多</text>
					</view>
				</view>

				<image style="height: 300rpx;width: 168rpx; position: absolute;right: 80rpx;"
					src="../../static/imgs/bg2.png" mode=""></image>
			</view>
			<scroll-view :scroll-x="true" style="white-space: nowrap;margin-top: 14rpx;">
				<view class="list " v-for="(item, index) in list" :key="index">
					<view class="inner">
						<image style="width: 250rpx;height: 264rpx; border-radius: 20rpx;" mode="widthFix"
							:src="item.image"></image>
						<view class="list-text">
							{{ item.title }}
						</view>
						<view class="list-num">{{ item.suText }}</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showNotice: true, // 制通告栏显示
				// 搜索框输入内容
				searchText: '',
				currIndex: 0, 
				horizontalScrollNavList: [{
					imageInput: '/static/ww/sw.png'
				}, {
					imageInput: '/static/ww/shoub.png'
				}],
				menuTop: app.globalData.menuTop,
				navBarHeight: app.globalData.navBarHeight,
				menuRight: app.globalData.menuRight,
				menuBotton: app.globalData.menuBotton,
				menuHeight: app.globalData.menuHeight,
				statusBarHeight: app.globalData.statusBarHeight,
				menuWidth: app.globalData.menuWidth,
				scrollTop: 0.5,
				list: [{
						image: '/static/ww/ww16.png',
						title: 'iPhone 16 Pro',
						suText: '￥7419 起',
					},
					{
						image: '/static/ww/mate70.png',
						title: 'HUAWEI Mate 70 Pro+',
						suText: '￥8499 起'
					},
					{
						image: '/static/imgs/f2.png',
						title: '华为 Mate60 Pro',
						suText: '￥5719 起'
					},
					{
						image: '/static/imgs/f3.png',
						title: 'iPhone 15 Pro Max',
						suText: '￥7658 起'
					},
					{
						image: '/static/ff/ff4.png',
						title: '小米15 Pro',
						suText: '￥4857 起'
					},

				],

				opacity: 0,
				scrollTop: 0.5,
				isScrolled: false, // 用于控制是否已经滚动到指定距离
			}
		},
		onPageScroll(e) {

			this.scrollTop = e.scrollTop;

			this.isScrolled = e.scrollTop > 50; // 设置滚动阈值
		},
		onShow() {

		},
		methods: {
			searchInBaidu() {
				if (!this.searchText.trim()) {
					// 显示消息框
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					})
					return
				}
				// 构建百度url
				const searchUrl = `https://www.baidu.com/s?wd=${encodeURIComponent(this.searchText)}`

				// 在小程序内打开页面
				uni.navigateTo({
					url: `/pages/webview/webview?url=${encodeURIComponent(searchUrl)}`

				})
			},
			// 处理关注点击
			handleNoticeFollow() {
				// 显示关注成功提示
				uni.showToast({
					title: '关注成功',
					icon: 'success',
					duration: 2000
				});

				// 隐藏通告栏
				this.showNotice = false;

				// 保存状态到本地存储
				uni.setStorageSync('hasFollowed', true);
			},

			// 关闭通告栏
			closeNotice() {
				this.showNotice = false;
			},


			navigateToCategory(type) {
				// 根据类型跳转到对应页面
				uni.navigateTo({
					url: `/pages/category/category?type=${type}`
				})
			},
			gengduo() {
				uni.switchTab({
					url: "/pages/community/community"
				});
			},
			navigateToGaodeMap() {
				const destinationLatitude = 24.499388; // 店铺的纬度
				const destinationLongitude = 118.124639; // 店铺的经度
				const name = encodeURIComponent('厦门新生活店'); // 店铺名称
				const address = encodeURIComponent('思明区'); // 店铺地址

				// 构建高德地图的 URL
				const gaodeMapUrl =
					`https://uri.amap.com/navigation?to=${destinationLongitude},${destinationLatitude},${name}(${address})`;

				// 打开高德地图
				uni.navigateTo({
					url: `/pages/webview/webview?url=${encodeURIComponent(gaodeMapUrl)}` // 使用 webview 打开高德地图
				});
			}
		},
		onLoad() {
			// 检查是否已关注
			// const hasFollowed = uni.getStorageSync('hasFollowed');
			// if (hasFollowed) {
			// 	this.showNotice = false;
			// }
		}
	}
</script>
<style scoped lang="scss">
	.page {
		background-color: #F2F3F7;
		width: 100%;
		height: 100%;
	}

	.search-btn {
		width: 120rpx !important;
		height: 72rpx !important;
		background-color: #0256FF !important;
		border-radius: 0 16rpx 16rpx 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		line-height: 1 !important;
		font-weight: normal !important;
	}

	/* 去除button的默认hover效果 */
	.search-btn::after {
		border: none;
	}

	/* 自定义hover效果 */
	.search-btn:active {
		opacity: 0.8;
	}

	.btn-text {
		color: #ffffff;
		font-size: 28rpx;
	}

	.slot {
		border-radius: 24rpx;
		background-color: #54534D;
		overflow: hidden;
		margin: 24rpx;
		margin-top: 30rpx;
		color: #fff;

		.content-show {
			color: #fff;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding: 20rpx;
			display: flex;
			flex-direction: column;

			.text_1 {
				font-size: 38rpx;
			}

			.text_2 {
				font-size: 26rpx;
				font-weight: 300;
				margin-top: 14rpx;
				display: flex;

				.gengduo {
					background-color: #AAA9A6;
					border-radius: 22rpx;
					/* padding-top: 0rpx; */
					padding-bottom: 5rpx;
					padding-left: 20rpx;
					padding-right: 20rpx;
					margin-left: 20rpx;
					color: #54534D;
					font-size: 22rpx;
				}
			}
		}

		.list {
			margin: 10rpx;
			display: inline-block;
			background-color: #fff;
			border-radius: 24rpx;
			width: 250rpx;
		}

		.inner {
			display: flex;
			flex-wrap: wrap;

		}

		.list-text {
			width: 100%;
			padding-top: 16rpx;
			margin-bottom: 12rpx;
			font-size: 24rpx;
			color: #1D2129;
			white-space: normal; // 允许换行
			word-wrap: break-word; // 在必要时打断单词
			text-overflow: ellipsis; // 如果需要，可以用省略号显示溢出的文本
			text-align: center;
		}

		.list-num {
			font-size: 22rpx;
			color: #F5222D;
			width: 100%;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}

	.top {
		width: 100vw;
	}

	.navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 899;
		overflow: hidden;
	}

	.inner {
		height: 100%;
		background-color: transparent;
		transition: background-color 0.3s;
	}

	.inner.scrolled {
		/* 滚动后背景变色 */
		background-color: #ffffff;
	}

	.loaction-slot {
		display: flex;
		align-items: center;
		// padding: 10px;
		width: 1000px
	}

	.logo-image {
		// background-color: #0256ff;
		width: 100px;
		height: 100px;
		margin-right: 20px;
	}

	.loaction-title {
		display: flex;
		flex-direction: column;
	}

	.ad-text {
		font-size: 20rpx;
		color: #333;
		font-weight: bold;
		line-height: 1.5;
	}

	.section_5 {
		padding: 4rpx 4rpx 4rpx 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		border-left: solid 4rpx #1d2129;
		border-right: solid 4rpx #1d2129;
		border-top: solid 4rpx #1d2129;
		border-bottom: solid 4rpx #1d2129;
		margin: 24rpx;

		.image_3 {
			width: 32rpx;
			height: 32rpx;
		}

		.text {
			color: #86909c;
			font-size: 24rpx;
			line-height: 36rpx;
		}

		.button {
			padding: 12rpx 0;
			background-image: linear-gradient(90deg, #1890ff 0%, #0256ff 100%);
			border-radius: 8rpx;
			width: 116rpx;
			// height: 56rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.text_2 {
				color: #ffffff;
			}

			.font_3 {
				font-size: 28rpx;
				line-height: 34rpx;
				color: #ffffff;
			}
		}
	}

	.grid {
		margin: 24rpx;
		padding-top: 5.98rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		height: 387rpx;
		display: grid;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 0;
		column-gap: 0;

		.grid-item {
			padding: 12rpx 0 12rpx;

			.image_4 {
				width: 112rpx;
				height: 112rpx;
			}

			.font_4 {
				font-size: 23.94rpx;
				font-family: 'PingFang SC';
				line-height: 33.91rpx;
				color: #1d2129;
			}

			.text_3 {
				font-size: 25.93rpx;
				line-height: 35.9rpx;
			}
		}
	}

	.slot-img {
		height: auto;
		width: 100%;

		.dtos {
			display: flex;
			justify-content: center;
			margin-top: -38rpx;
			height: 16px;
			margin-left: 52rpx;
			position: absolute;

			.dto {
				width: 120rpx;
				height: 10rpx;
				border-radius: 500rpx;
				background: rgba(255, 255, 255, 0.46);
				margin: 0 7rpx;
				transition: width 0.5s;
			}

			.dto-active {
				// background: #c2c2c2;

				background: #fff;
				width: 100rpx;
			}
		}

		.scroll {
			width: 100%;
			white-space: nowrap;
			height: 400rpx;
		}

		.item {
			display: inline-block;
			position: relative;
			border-radius: 24rpx;
			overflow: hidden;
			margin: 0 24rpx;

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 24rpx;
				overflow: hidden;
				z-index: 19;
				width: 702rpx;
				height: 400rpx;
			}

		}
	}

	.notice-bar {
		margin: 24rpx;
		background: linear-gradient(to right, #fff8f2, #fff6ed);
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 125, 18, 0.08);

		.notice-content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.notice-left {
				display: flex;
				align-items: center;
				flex: 1;

				.notice-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 16rpx;
				}

				.notice-text {
					font-size: 28rpx;
					color: #ff7d12;
					font-weight: 500;
				}
			}

			.notice-btn {
				min-width: 120rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #ff7d12;
				color: #ffffff;
				font-size: 26rpx;
				border-radius: 28rpx;
				padding: 0 30rpx;
				margin: 0;
				border: none;
				font-weight: 500;
				box-shadow: 0 4rpx 8rpx rgba(255, 125, 18, 0.2);

				&::after {
					border: none;
				}

				&:active {
					transform: scale(0.98);
					box-shadow: 0 2rpx 4rpx rgba(255, 125, 18, 0.2);
				}
			}
		}
	}

	.container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 24rpx;
		background-color: #f8f8f8;

		/* 左侧部分 */
		.left-section {
			width: 48%;
			background-color: #2e3d5c;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #ffffff;
		}

		.left-image {
			width: 100%;
			border-radius: 20rpx;
			height: 100%;
		}

		.left-text {
			margin-top: 20rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}

		.subtitle {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.left-button {
			margin-top: 20rpx;
			background-color: #5871ff;
			padding: 20rpx;
			border-radius: 30rpx;
			text-align: center;
		}

		.button-text {
			color: #ffffff;
			font-size: 28rpx;
		}

		/* 右侧部分 */
		.right-section {
			width: 48%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.product {
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		}

		.product-info {
			display: flex;
			flex-direction: column;
		}

		.product-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.product-desc {
			font-size: 24rpx;
			margin-top: 10rpx;
			color: #888888;
		}

		.product-image {
			width: 100%;
			height: 130rpx;
		}

	}

	.store-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 180rpx;
		// background-color: #ffffff;
		border-radius: 20rpx;
		// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin: 24rpx;
		overflow: hidden;

		.store-image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			object-fit: cover;
		}

		.store-info {
			width: 520rpx;
			height: 180rpx;
			// margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			border-radius: 20rpx;

			/* 背景图片设置 */
			background-image: url('../../static/imgs/sbg.png');
			/* 你的背景图片路径 */
			background-size: cover;
			background-repeat: no-repeat;


			.store-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				padding-left: 20rpx;
				padding-top: 20rpx;
			}

			.store-location {
				padding-left: 20rpx;
				padding-top: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.location-text {
				font-size: 24rpx;
				color: #999999;
			}

			.distance-text {
				font-size: 24rpx;
				color: #999999;
			}

			.store-button {
				background-color: #0256FF;
				border-radius: 24rpx 0rpx 0rpx 0rpx;
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40rpx;
				width: 160rpx;

			}

			.button-text {
				color: #ffffff;
				font-size: 28rpx;
			}
		}


	}
</style>